<script setup lang="ts">
/**
 * 小镇管理页面
 */

/* 引入 */
import { ref, reactive, onMounted, inject } from "vue";
import { ElMessage } from "element-plus";
import COS from "cos-js-sdk-v5";
import { config } from "../../../config.js";

/* 数据 */
const axios = inject("$axios");

const towns = ref([]);

const addDialogVisible = ref(false);

const editDialogVisible = ref(false);

const pushDialogVisible = ref(false);

// 表单上传次数(上传多个图片时进行一次计数)
const uploadCount = ref(0);

// 添加表单数据
const form = reactive({
  townname: "",
  tel1: "",
  tel2: "",
  tel3: "",
  midpiclist: [],
  spotlist: [],
  siderpiclist: [],
  townlogo: "",
  townvideo: "",
});

// 修改表单数据
const editForm = reactive({
  townname: "",
  updateData: {
    townname: "",
  },
});

// 文章表单数据
const textForm = reactive({
  town: "",
  sort: "",
  title: "",
  origin: "",
  content: "",
});

// 红色轮播图列表
const midpiclistFileList = ref([]);

// 景点轮播图列表
const spotlistFileList = ref([]);

// 海报轮播图列表
const siderpiclistFileList = ref([]);

// 小镇标识图片
const townlogoFile = ref([]);

// 小镇视频
const townvideoFile = ref([]);

// 配置 cos 全局对象
const cos = new COS({
  SecretId: config.secret_id,
  SecretKey: config.secret_key,
});

/* 钩子 */
onMounted(() => {
  // 发送请求获取小镇列表
  axios
    .get("/towns/list")
    .then((res) => {
      towns.value = res.data;
    })
    .catch((err) => {
      console.error("获取小镇列表失败:", err);
    });
});

/* 回调 */
// 添加小镇回调
const addTown = () => {
  // 清空添加表单, 避免后续干扰
  form.townname = "";
  form.tel1 = "";
  form.tel2 = "";
  form.tel3 = "";
  form.midpiclist = [];
  form.spotlist = [];
  form.siderpiclist = [];
  form.townlogo = "";
  form.townvideo = "";

  // 清空变量, 避免后续干扰
  midpiclistFileList.value = [];
  spotlistFileList.value = [];
  siderpiclistFileList.value = [];
  townlogoFile.value = [];
  townvideoFile.value = [];

  // 显示弹窗
  addDialogVisible.value = true;
};

// 修改小镇回调
const editTown = (town) => {
  // 自动获取小镇信息填入修改表单
  editForm.townname = town.townname; // 填入原来的小镇名
  editDialogVisible.value = true;

  // 默认填充原有的数据
  editForm.updateData = {
    townname: town.townname,
  };
};

// 删除小镇回调
const deleteTown = (town) => {
  axios
    .delete("/towns", {
      data: {
        email: town.email,
        townname: town.townname,
      },
    })
    .then(() => {
      towns.value = towns.value.filter((t) => t._id !== town._id); // 更新前端小镇列表(这句很好, 可以不用发起请求)
      ElMessage({
        message: `已删除小镇：${town.townname}`,
        type: "success",
      });
    })
    .catch((err) => {
      console.error("删除小镇失败:", err);

      ElMessage({
        message: "删除小镇失败，请稍后再试！",
        type: "error",
      });
    });
};

// 发布文章回调
const pushText = (town) => {
  // 默认表单
  textForm.town = town.townname;

  // 清理表达
  textForm.sort = "";
  textForm.origin = "";
  textForm.title = "";
  textForm.content = "";

  pushDialogVisible.value = true;
};

// TODO: >>> begin: 任务紧要, 先不方法复用 >>>
// 上传图片到 COS 并获取 URL 回调(多少个文件就调用多少次)
const uploadToCos = async (file) => {
  const suffix = file.file.name.split(".").pop(); // 获取文件后缀名
  const key = `${config.town_of_bucket}/${Date.now()}-${Math.random()}.${suffix}`; // 生成文件存储路径
  const index = uploadCount.value; // 获取递归次数
  const data = midpiclistFileList.value[index].raw; // 获取文件内容

  // 设置上传参数
  const params = {
    Bucket: config.bucket,
    Region: config.region,
    Key: key,
    Body: data, // 文件内容 (必须是 raw 属性的值)
    ContentType: file.type, // 文件类型
  };

  // 如果一个组件上传完毕就重置计数
  if (midpiclistFileList.value.length - 1 === uploadCount.value) {
    uploadCount.value = 0;
  } else {
    uploadCount.value++;
  }

  // 尝试返回 url 路径
  try {
    // 返回一个 Promise 来确保文件上传成功后才返回结果
    await new Promise((resolve, reject) => {
      cos.putObject(params, (err) => {
        if (err) {
          // 如果上传失败，抛出错误
          reject("存储失败!");
        } else {
          // 上传成功
          resolve(
            `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`,
          );
        }
      });
    });

    // 提供用户提醒(每个文件提醒一次)
    ElMessage({
      message: "文件成功上传到云端",
      type: "success",
    });

    // 上传成功，返回文件的 URL
    const fileUrl = `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`;
    return fileUrl;
  } catch (error) {
    // 如果上传失败，提示错误信息
    ElMessage({
      message: "文件无法上传到云端",
      type: "error",
    });
    throw new Error(error); // 重新抛出错误
  }
};
// 添加图片文件上传回调(多少个文件就调用多少次)
const handleFileUpload = async (file: File) => {
  try {
    const fileUrl = await uploadToCos(file); // 上传文件并获取链接
    form.midpiclist.push(fileUrl); // 将上传的文件 URL 添加到表单中
  } catch (err) {
    ElMessage({
      message: "URL 添加错误",
      type: "error",
    });
  }
};

// 上传图片到 COS 并获取 URL 回调(多少个文件就调用多少次)
const uploadToCos_spotlist = async (file) => {
  const suffix = file.file.name.split(".").pop(); // 获取文件后缀名
  const key = `${config.town_of_bucket}/${Date.now()}-${Math.random()}.${suffix}`; // 生成文件存储路径
  const index = uploadCount.value; // 获取递归次数
  const data = spotlistFileList.value[index].raw; // 获取文件内容

  // 设置上传参数
  const params = {
    Bucket: config.bucket,
    Region: config.region,
    Key: key,
    Body: data, // 文件内容 (必须是 raw 属性的值)
    ContentType: file.type, // 文件类型
  };

  // 如果一个组件上传完毕就重置计数
  if (spotlistFileList.value.length - 1 === uploadCount.value) {
    uploadCount.value = 0;
  } else {
    uploadCount.value++;
  }

  // 尝试返回 url 路径
  try {
    // 返回一个 Promise 来确保文件上传成功后才返回结果
    await new Promise((resolve, reject) => {
      cos.putObject(params, (err) => {
        if (err) {
          // 如果上传失败，抛出错误
          reject("存储失败!");
        } else {
          // 上传成功
          resolve(
            `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`,
          );
        }
      });
    });

    // 提供用户提醒(每个文件提醒一次)
    ElMessage({
      message: "文件成功上传到云端",
      type: "success",
    });

    // 上传成功，返回文件的 URL
    const fileUrl = `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`;
    return fileUrl;
  } catch (error) {
    // 如果上传失败，提示错误信息
    ElMessage({
      message: "文件无法上传到云端",
      type: "error",
    });
    throw new Error(error); // 重新抛出错误
  }
};
// 添加图片文件上传回调(多少个文件就调用多少次)
const handleFileUpload_spotlist = async (file: File) => {
  try {
    const fileUrl = await uploadToCos_spotlist(file); // 上传文件并获取链接
    form.spotlist.push(fileUrl); // 将上传的文件 URL 添加到表单中
  } catch (err) {
    ElMessage({
      message: "URL 添加错误",
      type: "error",
    });
  }
};

// 上传图片到 COS 并获取 URL 回调(多少个文件就调用多少次)
const uploadToCos_siderpiclist = async (file) => {
  const suffix = file.file.name.split(".").pop(); // 获取文件后缀名
  const key = `${config.town_of_bucket}/${Date.now()}-${Math.random()}.${suffix}`; // 生成文件存储路径
  const index = uploadCount.value; // 获取递归次数
  const data = siderpiclistFileList.value[index].raw; // 获取文件内容

  // 设置上传参数
  const params = {
    Bucket: config.bucket,
    Region: config.region,
    Key: key,
    Body: data, // 文件内容 (必须是 raw 属性的值)
    ContentType: file.type, // 文件类型
  };

  // 如果一个组件上传完毕就重置计数
  if (siderpiclistFileList.value.length - 1 === uploadCount.value) {
    uploadCount.value = 0;
  } else {
    uploadCount.value++;
  }

  // 尝试返回 url 路径
  try {
    // 返回一个 Promise 来确保文件上传成功后才返回结果
    await new Promise((resolve, reject) => {
      cos.putObject(params, (err) => {
        if (err) {
          // 如果上传失败，抛出错误
          reject("存储失败!");
        } else {
          // 上传成功
          resolve(
            `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`,
          );
        }
      });
    });

    // 提供用户提醒(每个文件提醒一次)
    ElMessage({
      message: "文件成功上传到云端",
      type: "success",
    });

    // 上传成功，返回文件的 URL
    const fileUrl = `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`;
    return fileUrl;
  } catch (error) {
    // 如果上传失败，提示错误信息
    ElMessage({
      message: "文件无法上传到云端",
      type: "error",
    });
    throw new Error(error); // 重新抛出错误
  }
};
// 添加图片文件上传回调(多少个文件就调用多少次)
const handleFileUpload_siderpiclist = async (file: File) => {
  try {
    const fileUrl = await uploadToCos_siderpiclist(file); // 上传文件并获取链接
    form.siderpiclist.push(fileUrl); // 将上传的文件 URL 添加到表单中
  } catch (err) {
    ElMessage({
      message: "URL 添加错误",
      type: "error",
    });
  }
};

// 上传图片到 COS 并获取 URL 回调(多少个文件就调用多少次)
const uploadToCos_townlogo = async (file) => {
  const suffix = file.file.name.split(".").pop(); // 获取文件后缀名
  const key = `${config.town_of_bucket}/${Date.now()}-${Math.random()}.${suffix}`; // 生成文件存储路径
  const index = uploadCount.value; // 获取递归次数
  const data = townlogoFile.value[index].raw; // 获取文件内容

  // 设置上传参数
  const params = {
    Bucket: config.bucket,
    Region: config.region,
    Key: key,
    Body: data, // 文件内容 (必须是 raw 属性的值)
    ContentType: file.type, // 文件类型
  };

  // 如果一个组件上传完毕就重置计数
  uploadCount.value = 0;

  // 尝试返回 url 路径
  try {
    // 返回一个 Promise 来确保文件上传成功后才返回结果
    await new Promise((resolve, reject) => {
      cos.putObject(params, (err) => {
        if (err) {
          // 如果上传失败，抛出错误
          reject("存储失败!");
        } else {
          // 上传成功
          resolve(
            `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`,
          );
        }
      });
    });

    // 提供用户提醒(每个文件提醒一次)
    ElMessage({
      message: "文件成功上传到云端",
      type: "success",
    });

    // 上传成功，返回文件的 URL
    const fileUrl = `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`;
    return fileUrl;
  } catch (error) {
    // 如果上传失败，提示错误信息
    ElMessage({
      message: "文件无法上传到云端",
      type: "error",
    });
    throw new Error(error); // 重新抛出错误
  }
};
// 添加图片文件上传回调(多少个文件就调用多少次)
const handleFileUpload_townlogo = async (file: File) => {
  try {
    const fileUrl = await uploadToCos_townlogo(file); // 上传文件并获取链接
    form.townlogo = fileUrl; // 将上传的文件 URL 添加到表单中
  } catch (err) {
    ElMessage({
      message: "URL 添加错误",
      type: "error",
    });
  }
};

// 上传视频到 COS 并获取 URL 回调(多少个文件就调用多少次)
const uploadToCos_townvideo = async (file) => {
  const suffix = file.file.name.split(".").pop(); // 获取文件后缀名
  const key = `${config.town_of_bucket}/${Date.now()}-${Math.random()}.${suffix}`; // 生成文件存储路径
  const index = uploadCount.value; // 获取递归次数
  const data = townvideoFile.value[index].raw; // 获取文件内容

  // 设置上传参数
  const params = {
    Bucket: config.bucket,
    Region: config.region,
    Key: key,
    Body: data, // 文件内容 (必须是 raw 属性的值)
    ContentType: file.type, // 文件类型
  };

  // 如果一个组件上传完毕就重置计数
  uploadCount.value = 0;

  // 尝试返回 url 路径
  try {
    // 返回一个 Promise 来确保文件上传成功后才返回结果
    await new Promise((resolve, reject) => {
      cos.putObject(params, (err) => {
        if (err) {
          // 如果上传失败，抛出错误
          reject("存储失败!");
        } else {
          // 上传成功
          resolve(
            `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`,
          );
        }
      });
    });

    // 提供用户提醒(每个文件提醒一次)
    ElMessage({
      message: "文件成功上传到云端",
      type: "success",
    });

    // 上传成功，返回文件的 URL
    const fileUrl = `https://${params.Bucket}.cos.${params.Region}.myqcloud.com/${params.Key}`;
    return fileUrl;
  } catch (error) {
    // 如果上传失败，提示错误信息
    ElMessage({
      message: "文件无法上传到云端",
      type: "error",
    });
    throw new Error(error); // 重新抛出错误
  }
};
// 添加视频文件上传回调(多少个文件就调用多少次)
const handleFileUpload_townvideo = async (file: File) => {
  try {
    const fileUrl = await uploadToCos_townvideo(file); // 上传文件并获取链接
    form.townvideo = fileUrl; // 将上传的文件 URL 添加到表单中
  } catch (err) {
    ElMessage({
      message: "URL 添加错误",
      type: "error",
    });
  }
};
// TODO: <<< end <<<

// TODO: 取消文件删除对象 URL 回调(需要注意只针对用户删除已选择文件)

// TODO: 默认填充和清空表单逻辑是可以统一的

// 提交添加小镇表单回调
const submitAddTownForm = () => {
  // 校验表单数据 TODO: 对于图片的检查还不到位, 先放下
  if (!form.townname || !form.tel1 || !form.tel2 || !form.tel3) {
    ElMessage({
      message: "请填写完整的小镇信息!",
      type: "error",
    });
    return;
  }

  // 提交表单数据
  axios
    .post("/towns", {
      townname: form.townname,
      tel1: form.tel1,
      tel2: form.tel2,
      tel3: form.tel3,
      midpiclist: form.midpiclist,
      spotlist: form.spotlist,
      siderpiclist: form.siderpiclist,
      townlogo: form.townlogo,
      townvideo: form.townvideo,
    })
    .then((res) => {
      ElMessage({
        message: `已添加小镇: ${res.data.townname}`,
        type: "success",
      });

      towns.value.push(res.data); // 更新小镇列表
      addDialogVisible.value = false; // 关闭弹窗
    })
    .catch((err) => {
      console.error("添加小镇失败:", err);
      ElMessage({
        message: "添加小镇失败, 请检查输入信息!",
        type: "error",
      });
    });
};

// 提交修改小镇表单回调
const submitEditTownForm = () => {
  // 校验表单数据
  if (!editForm.updateData.townname) {
    ElMessage({
      message: "请填写要修改的信息选项!",
      type: "error",
    });
    return;
  }

  // 提交更新请求
  axios
    .put("/towns", {
      townname: editForm.townname,
      updateData: editForm.updateData,
    })
    .then((res) => {
      // 更新列表
      const updatedTown = res.data.updatedTown; // 获取更新后的小镇数据

      const index = towns.value.findIndex(
        (town) => town._id === updatedTown._id, // 找到并更新小镇列表中的对应小镇
      );

      if (index !== -1) {
        towns.value[index] = { ...towns.value[index], ...updatedTown }; // 替换为更新后的小镇数据
      }

      // 成功提示
      ElMessage({
        message: `小镇信息修改成功！`,
        type: "success",
      });
      editDialogVisible.value = false; // 关闭对话框
    })
    .catch((err) => {
      // 错误提示
      console.log(err);
      ElMessage({
        message: "修改小镇失败, 请稍后重试!",
        type: "error",
      });
    });
};

// 确认发布文章表单回调
const submitTextForm = () => {
  // 校验表单数据
  if (
    !textForm.title ||
    !textForm.content ||
    !textForm.origin ||
    !textForm.sort
  ) {
    ElMessage({
      message: "请填写完整文章的所有信息!",
      type: "error",
    });
    return;
  }

  // 提交更新请求
  axios
    .post("/articles", {
      town: textForm.town,
      sort: textForm.sort,
      title: textForm.title,
      origin: textForm.origin,
      content: textForm.content,
    })
    .then((res) => {
      // 成功提示
      ElMessage({
        message: `文章发布成功！`,
        type: "success",
      });
      pushDialogVisible.value = false; // 关闭对话框
    })
    .catch((err) => {
      // 错误提示
      ElMessage({
        message: "文章发布失败!",
        type: "error",
      });
    });
};
</script>

<template>
  <div class="town-page">
    <el-card class="page-card">
      <template #header>
        <h2>管理员-小镇管理</h2>
      </template>
      <!-- 添加表单组件 -->
      <div class="add-form-dialog">
        <el-dialog v-model="addDialogVisible" title="添加小镇" width="500">
          <el-form :model="form">
            <!-- 小镇名称 -->
            <el-form-item label="小镇名称">
              <el-input v-model="form.townname" placeholder="请输入名称" />
            </el-form-item>
            <!-- 小镇旅游咨询电话 -->
            <el-form-item label="小镇旅游咨询电话">
              <el-input v-model="form.tel1" placeholder="请输入电话" />
            </el-form-item>
            <!-- 旅游发展委员会电话 -->
            <el-form-item label="旅游发展委员会电话">
              <el-input v-model="form.tel2" placeholder="请输入电话" />
            </el-form-item>
            <!-- 国家旅游服务热线电话 -->
            <el-form-item label="国家旅游服务热线电话">
              <el-input v-model="form.tel3" placeholder="请输入电话" />
            </el-form-item>
            <!-- 红色轮播图 -->
            <el-form-item label="红色轮播图">
              <!-- 属性解释: -->
              <!-- multiple 允许多个文件上传 -->
              <!-- v-model:file-list="" 绑定用户选择的文件列表(由浏览器的 Blob URL 自动生成, 以实现预览功能, 并且可以找到文件的内容) -->
              <!-- list-type="" 图片上传后缩略展示方式 -->
              <!-- accept="" 允许的图片上传类型 -->
              <el-upload
                multiple
                v-model:file-list="midpiclistFileList"
                :http-request="handleFileUpload"
                list-type="picture"
                accept="image/jpeg,image/png"
              >
                <template #tip>
                  <!-- TODO: 文件大小做限制 -->
                  <div class="el-upload__tip">
                    <el-text class="mx-1" type="info">
                      仅允许上传多张 500kb .jpg/.png 格式图片
                    </el-text>
                  </div>
                </template>
                <el-button type="success">选择图片</el-button>
              </el-upload>
            </el-form-item>
            <!-- 景色轮播图 -->
            <el-form-item label="景色轮播图">
              <!-- 属性解释: -->
              <!-- multiple 允许多个文件上传 -->
              <!-- v-model:file-list="" 绑定用户选择的文件列表(由浏览器的 Blob URL 自动生成, 以实现预览功能, 并且可以找到文件的内容) -->
              <!-- list-type="" 图片上传后缩略展示方式 -->
              <!-- accept="" 允许的图片上传类型 -->
              <el-upload
                multiple
                v-model:file-list="spotlistFileList"
                :http-request="handleFileUpload_spotlist"
                list-type="picture"
                accept="image/jpeg,image/png"
              >
                <template #tip>
                  <!-- TODO: 文件大小做限制 -->
                  <div class="el-upload__tip">
                    <el-text class="mx-1" type="info">
                      仅允许上传多张 500kb .jpg/.png 格式图片
                    </el-text>
                  </div>
                </template>
                <el-button type="success">选择图片</el-button>
              </el-upload>
            </el-form-item>
            <!-- 海报轮播图 -->
            <el-form-item label="海报轮播图">
              <!-- 属性解释: -->
              <!-- multiple 允许多个文件上传 -->
              <!-- v-model:file-list="" 绑定用户选择的文件列表(由浏览器的 Blob URL 自动生成, 以实现预览功能, 并且可以找到文件的内容) -->
              <!-- list-type="" 图片上传后缩略展示方式 -->
              <!-- accept="" 允许的图片上传类型 -->
              <el-upload
                multiple
                v-model:file-list="siderpiclistFileList"
                :http-request="handleFileUpload_siderpiclist"
                list-type="picture"
                accept="image/jpeg,image/png"
              >
                <template #tip>
                  <!-- TODO: 文件大小做限制 -->
                  <div class="el-upload__tip">
                    <el-text class="mx-1" type="info">
                      仅允许上传多张 500kb .jpg/.png 格式图片
                    </el-text>
                  </div>
                </template>
                <el-button type="success">选择图片</el-button>
              </el-upload>
            </el-form-item>
            <!-- 小镇标志图 -->
            <el-form-item label="小镇标志图">
              <!-- 属性解释: -->
              <!-- v-model:file-list="" 绑定用户选择的文件列表(由浏览器的 Blob URL 自动生成, 以实现预览功能, 并且可以找到文件的内容) -->
              <!-- list-type="" 图片上传后缩略展示方式 -->
              <!-- accept="" 允许的图片上传类型 -->
              <el-upload
                :multiple="false"
                v-model:file-list="townlogoFile"
                :http-request="handleFileUpload_townlogo"
                list-type="picture"
                accept="image/jpeg,image/png"
              >
                <!-- TODO: 禁止多次单选 -->
                <template #tip>
                  <!-- TODO: 文件大小做限制 -->
                  <div class="el-upload__tip">
                    <el-text class="mx-1" type="info">
                      仅允许上传一张 500kb .jpg/.png 格式图片
                    </el-text>
                  </div>
                </template>
                <el-button type="success">选择图片</el-button>
              </el-upload>
            </el-form-item>
            <!-- 小镇视频 -->
            <el-form-item label="小镇视频">
              <!-- 属性解释: -->
              <!-- v-model:file-list="" 绑定用户选择的文件列表(由浏览器的 Blob URL 自动生成, 以实现预览功能, 并且可以找到文件的内容) -->
              <!-- list-type="" 视频上传后缩略展示方式 -->
              <!-- accept="" 允许的视频上传类型 -->
              <el-upload
                :multiple="false"
                v-model:file-list="townvideoFile"
                :http-request="handleFileUpload_townvideo"
                list-type="picture"
                accept="video/mp4, video/avi, video/mov"
              >
                <!-- TODO: 禁止多次单选 -->
                <template #tip>
                  <!-- TODO: 文件大小做限制 -->
                  <div class="el-upload__tip">
                    <el-text class="mx-1" type="info">
                      仅允许上传一个 .mp4/.avi/.mov 视频
                    </el-text>
                  </div>
                </template>
                <el-button type="success">选择视频</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <!-- 提交/取消表单 -->
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="addDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitAddTownForm">
                添加
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <!-- 修改表单组件 -->
      <div class="edit-form-dialog">
        <el-dialog v-model="editDialogVisible" title="修改小镇" width="500">
          <el-form :model="editForm">
            <el-form-item label="名称">
              <el-input
                v-model="editForm.updateData.townname"
                placeholder="请输入名称"
              />
            </el-form-item>
            <!-- TODO: 可以修改其他字段 -->
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="editDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitEditTownForm">
                修改
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <!-- 发布文章组件 -->
      <div class="add-form-dialog">
        <el-dialog v-model="pushDialogVisible" title="发布文章" width="600px">
          <el-form :model="textForm" ref="formRef">
            <!-- 标题 -->
            <el-form-item label="标题" :label-width="labelWidth">
              <el-input v-model="textForm.title" placeholder="请输入文章标题" />
            </el-form-item>
            <!-- 作者 -->
            <el-form-item label="作者" :label-width="labelWidth">
              <el-input
                v-model="textForm.origin"
                placeholder="请输入作者姓名"
              />
            </el-form-item>
            <!-- 标签 -->
            <el-form-item label="标签" :label-width="labelWidth">
              <el-select v-model="textForm.sort" placeholder="请选择文章标签">
                <el-option label="动态" value="动态" />
                <el-option label="文化" value="文化" />
                <el-option label="保护" value="保护" />
              </el-select>
            </el-form-item>
            <!-- 富文本内容 -->
            <el-form-item label="内容" :label-width="labelWidth">
              <!-- TODO: 还差拦截图片文本 -->
              <el-input
                v-model="textForm.content"
                style="width: 93%"
                :rows="20"
                type="textarea"
                placeholder="请输入文章的详细内容"
              />
            </el-form-item>
          </el-form>
          <!-- 提交/取消按钮 -->
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="pushDialogVisible = false">取消发布</el-button>
              <el-button type="primary" @click="submitTextForm">
                确认发布
              </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <!-- 页面标题组件 -->
      <div class="header">
        <h3>小镇列表</h3>
        <el-button type="primary" @click="addTown">添加小镇</el-button>
      </div>
      <!-- 小镇列表组件 -->
      <div class="table">
        <el-table :data="towns" style="width: 100%" border stripe>
          <el-table-column prop="townname" label="小镇名称" />
          <el-table-column prop="_id" label="小镇标识" />
          <el-table-column label="小镇操作">
            <template #default="{ row }">
              <el-space wrap :size="10">
                <el-button type="primary" size="small" @click="editTown(row)">
                  修改
                </el-button>
                <el-button type="danger" size="small" @click="deleteTown(row)">
                  删除
                </el-button>
                <el-button type="warning" size="small" @click="pushText(row)">
                  发布文章
                </el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.town-page {
  padding: 20px;
  background-color: #f5f5f5;
}

.page-card {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
}

.el-table {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
</style>
